<template>
  <Table border :columns="columns12" :data="data6">
    <template slot-scope="{ row }" slot="name">
      <strong>{{ row.name }}</strong>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button
        type="primary"
        size="small"
        style="margin-right: 5px"
        @click="show(index)"
        >View</Button
      >
      <Button type="error" size="small" @click="remove(index)">Delete</Button>
    </template>
  </Table>
</template>
<script>
import { getShopList } from "@/api/shop";
export default {
  name: "shop",
  data() {
    return {
      dom: null,
      columns12: [
        {
          title: "Name",
          slot: "name",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data6: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
        },
      ],
    };
  },
  methods: {
    getShopList() {
      getShopList({
        limit: 20,
        name: "",
        page: 1,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {
    this.getShopList();
  },
};
</script>
